

<template>

    <div class="mainAppContainer">

        <transition name="mainAinm">
             <keep-alive >
                <router-view class="appContatin"  v-if="$route.meta.keepAlive"></router-view>
            </keep-alive> 
         </transition>

        <transition name="mainAinm">
            <router-view class="appContatin" v-if="!$route.meta.keepAlive"></router-view>
        </transition>

    </div>
    
</template>




<script>
export default {
   mounted(){
      
   }
}
</script>


<style scoped>

    .mainAinm-enter-active,.mainAinm-leave-active{
		transition: all 0.6s ease;
        position: fixed;	
        width: 100%;
	}


	.mainAinm-enter{
		transform: translateX(100%);
        width: 100%;
         opacity: 0;
	}


	.mainAinm-leave-to{
		transform: translateX(-100%);
        width: 100%;
         opacity: 0;
	}


    


    .appContatin{
        height: 100%;
    }

    .mainAppContainer{
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

</style>
